<html>
	<head>
		<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
		<style type="text/css">
		<!--
		.alignRight{
			text-align: right;
		}
		.loading_image_div{
		}
		.loading_image{
			float: left;
		}
		.loading_label{
			float: left;
		}
		.extensionDiv{
			cursor: hand;
		}
		.unextensionImg {
			opacity: 0.15;
		}
		.groupsDiv{
			position: absolute;
			width: 200px;
		}
		.groupMembers {
			padding-left: 20px;
		}
		.groupMember{
			cursor: hand;
		}
		.chatDiv{
			position: absolute;
			box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);
			border-radius: 3px;
			left: 300px;
			top: 50px;
			border-color: #08c;
			width: 200px;
			height: 150px;
		}
		.messageToDiv {
			margin-right: auto;
			padding: 3px;
			outline: 0;
			border: 1px solid gray;
			word-wrap: break-word;
			overflow-x: hidden;
			overflow-y: auto;
			overflow-y: visible;
		}
		.messageTo{
			float: left;
			cursor: hand;
		}
		.divText{
			border: 2px #3E97D1 solid;
			width: 100%;
			background: white;
			box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);
			border-radius: 3px;
			overflow: hidden;
			cursor: text;
			height: 23px;
			*height: 30px;
		}
		.text{
			border: 2px #3E97D1 solid;
			background: white;
			box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);
			border-radius: 3px;
			overflow: hidden;
			cursor: text;
			height: 33px;
			*height: 30px;
		}
		.textArea{
			border: 2px #3E97D1 solid;
			background: white;
			box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);
			border-radius: 3px;
			overflow: hidden;
			cursor: text;
		}
		-->
		</style>
		<script	type="text/javascript">
		<!--
		$(function(){
		/**
			var url = "http://10.188.199.170/plugins/kingrayplugin/userservice?actionType=getAllUsers";
			$.getJSON(url, function(callBack){
				var groups_div = $(".groups_div");
				var groups = jQuery.parseJSON(callBack);
				alert(groups);
				groups_div.html("");
				$.each(groups, function(i, group){
					alert(group.groupName);
					groups_div.append("group: " + group.groupName);
					$.each(group.userStatusVOs, function(i, userStatusVO){
						groups_div.append(", User: " + userStatusVO.userName);
					});
				});
			});
			*/
			/**
			*/
			var callBack = $(".jsonArray").html();
			$(".loading").remove();
			var groups_div = $(".groupsDiv"); // 分组树根
			var temp_group_div = $(groups_div).next(".groupDiv"); // 分组模型，用于拷贝
			
			var groups = jQuery.parseJSON(callBack);
			$.each(groups, function(i, group){
				var groupDiv = $(temp_group_div).clone(); // 拷贝分组
				
				$(groupDiv).children().children(".groupName").html(group.groupName); // 插入分组名

				var groupMembersDiv = groupDiv.children(".groupMembers");
				$.each(group.userStatusVOs, function(i, userStatusVO){
					groupMembersDiv.append("<div class='groupMember' id='" + userStatusVO.userName + "'></div>");
					var memberDiv = groupMembersDiv.children("#" + userStatusVO.userName);
					memberDiv.append("<span class='userName " + userStatusVO.show + "'>" + userStatusVO.userName + "</span><span class='statusSpan'><img src='" + userStatusVO.statusImageURL + "'></img><span class='statusName'>" + userStatusVO.status + "</span></span>");
				});
				$(groupDiv).show();
				groups_div.append(groupDiv); // 连接到分组树
			});
			// 展开、缩起分组
			$(".extensionDiv").toggle(
				function(){
					$(this).next(".groupMembers").stop();
					$(this).next(".groupMembers").slideDown();
					$(this).children(".unextensionImg").attr("src", "../images/extension.png");
				}
				,
				function(){
					$(this).next(".groupMembers").stop();
					$(this).next(".groupMembers").slideUp();
					$(this).children(".unextensionImg").attr("src", "../images/unextension.png");
				}
			);
			
			$(".groupMember").click(function(){
				var userName = $(this).children(".userName").html();
				addMessageTo(userName);
			});
			/**
			* 添加收件人
			*/
			function addMessageTo(userName){
				var messageTos = $(".messageToDiv");
				/**
				var existsMessageTo= messageTos.children("#" + userName);
				alert(existsMessageTo.html() != "");
				if(existsMessageTo.html() != ""){
					messageTos.remove(existsMessageTo);
				}
				*/
				$(".messageTo").remove("#" + userName);
				var newMessageTo = "<div class='messageTo' id='" + userName + "'><span>" + userName + "</span><span>; </span></div>";
				messageTos.append(newMessageTo);
			}
			$(".messageTo").click(function(){
				$(this).focus();
			});
			$(window).keydown(function(event){
				alert(event.keyCode);
				switch(event.keyCode) {
			    	
				}
			});
		});
		-->
		</script>
		
	</head>
	<body>
		<div class="jsonArray" style="display:none;">[{"groupName":"IT部","userStatusVOs":[{"creationDate":{"date":27,"day":3,"hours":21,"minutes":13,"month":2,"seconds":0,"time":1364389980217,"timezoneOffset":-480,"year":113},"email":"","modificationDate":{"date":27,"day":3,"hours":21,"minutes":13,"month":2,"seconds":0,"time":1364389980217,"timezoneOffset":-480,"year":113},"name":"","priority":0,"show":"offline","status":"离线","statusImageURL":"/plugins/kingrayplugin/presenceservice?actionType=getStatusImageByShow&show=offline","userName":"zhangjia"},{"creationDate":{"date":28,"day":4,"hours":16,"minutes":26,"month":2,"seconds":10,"time":1364459170826,"timezoneOffset":-480,"year":113},"email":"","modificationDate":{"date":28,"day":4,"hours":16,"minutes":26,"month":2,"seconds":10,"time":1364459170826,"timezoneOffset":-480,"year":113},"name":"","priority":0,"show":"offline","status":"离线","statusImageURL":"/plugins/kingrayplugin/presenceservice?actionType=getStatusImageByShow&show=offline","userName":"陈万才"},{"creationDate":{"date":27,"day":3,"hours":21,"minutes":13,"month":2,"seconds":5,"time":1364389985809,"timezoneOffset":-480,"year":113},"email":"","modificationDate":{"date":27,"day":3,"hours":21,"minutes":13,"month":2,"seconds":5,"time":1364389985809,"timezoneOffset":-480,"year":113},"name":"","priority":0,"show":"offline","status":"离线","statusImageURL":"/plugins/kingrayplugin/presenceservice?actionType=getStatusImageByShow&show=offline","userName":"liujiahai"},{"creationDate":{"date":27,"day":3,"hours":21,"minutes":12,"month":2,"seconds":55,"time":1364389975632,"timezoneOffset":-480,"year":113},"email":"","modificationDate":{"date":27,"day":3,"hours":21,"minutes":12,"month":2,"seconds":55,"time":1364389975632,"timezoneOffset":-480,"year":113},"name":"","priority":0,"show":"offline","status":"离线","statusImageURL":"/plugins/kingrayplugin/presenceservice?actionType=getStatusImageByShow&show=offline","userName":"xiongyingqi"}]}, {"groupName":"资金部","userStatusVOs":[{"creationDate":{"date":27,"day":3,"hours":21,"minutes":13,"month":2,"seconds":0,"time":1364389980217,"timezoneOffset":-480,"year":113},"email":"","modificationDate":{"date":27,"day":3,"hours":21,"minutes":13,"month":2,"seconds":0,"time":1364389980217,"timezoneOffset":-480,"year":113},"name":"","priority":0,"show":"offline","status":"离线","statusImageURL":"/plugins/kingrayplugin/presenceservice?actionType=getStatusImageByShow&show=offline","userName":"zhangjia"},{"creationDate":{"date":28,"day":4,"hours":16,"minutes":26,"month":2,"seconds":10,"time":1364459170826,"timezoneOffset":-480,"year":113},"email":"","modificationDate":{"date":28,"day":4,"hours":16,"minutes":26,"month":2,"seconds":10,"time":1364459170826,"timezoneOffset":-480,"year":113},"name":"","priority":0,"show":"offline","status":"离线","statusImageURL":"/plugins/kingrayplugin/presenceservice?actionType=getStatusImageByShow&show=offline","userName":"陈万才"},{"creationDate":{"date":27,"day":3,"hours":21,"minutes":13,"month":2,"seconds":5,"time":1364389985809,"timezoneOffset":-480,"year":113},"email":"","modificationDate":{"date":27,"day":3,"hours":21,"minutes":13,"month":2,"seconds":5,"time":1364389985809,"timezoneOffset":-480,"year":113},"name":"","priority":0,"show":"offline","status":"离线","statusImageURL":"/plugins/kingrayplugin/presenceservice?actionType=getStatusImageByShow&show=offline","userName":"liujiahai"},{"creationDate":{"date":27,"day":3,"hours":21,"minutes":12,"month":2,"seconds":55,"time":1364389975632,"timezoneOffset":-480,"year":113},"email":"","modificationDate":{"date":27,"day":3,"hours":21,"minutes":12,"month":2,"seconds":55,"time":1364389975632,"timezoneOffset":-480,"year":113},"name":"","priority":0,"show":"offline","status":"离线","statusImageURL":"/plugins/kingrayplugin/presenceservice?actionType=getStatusImageByShow&show=offline","userName":"xiongyingqi"}]}, {"groupName":"业务部","userStatusVOs":[{"creationDate":{"date":27,"day":3,"hours":21,"minutes":13,"month":2,"seconds":0,"time":1364389980217,"timezoneOffset":-480,"year":113},"email":"","modificationDate":{"date":27,"day":3,"hours":21,"minutes":13,"month":2,"seconds":0,"time":1364389980217,"timezoneOffset":-480,"year":113},"name":"","priority":0,"show":"offline","status":"离线","statusImageURL":"/plugins/kingrayplugin/presenceservice?actionType=getStatusImageByShow&show=offline","userName":"zhangjia"},{"creationDate":{"date":28,"day":4,"hours":16,"minutes":26,"month":2,"seconds":10,"time":1364459170826,"timezoneOffset":-480,"year":113},"email":"","modificationDate":{"date":28,"day":4,"hours":16,"minutes":26,"month":2,"seconds":10,"time":1364459170826,"timezoneOffset":-480,"year":113},"name":"","priority":0,"show":"offline","status":"离线","statusImageURL":"/plugins/kingrayplugin/presenceservice?actionType=getStatusImageByShow&show=offline","userName":"陈万才"},{"creationDate":{"date":27,"day":3,"hours":21,"minutes":13,"month":2,"seconds":5,"time":1364389985809,"timezoneOffset":-480,"year":113},"email":"","modificationDate":{"date":27,"day":3,"hours":21,"minutes":13,"month":2,"seconds":5,"time":1364389985809,"timezoneOffset":-480,"year":113},"name":"","priority":0,"show":"offline","status":"离线","statusImageURL":"/plugins/kingrayplugin/presenceservice?actionType=getStatusImageByShow&show=offline","userName":"liujiahai"},{"creationDate":{"date":27,"day":3,"hours":21,"minutes":12,"month":2,"seconds":55,"time":1364389975632,"timezoneOffset":-480,"year":113},"email":"","modificationDate":{"date":27,"day":3,"hours":21,"minutes":12,"month":2,"seconds":55,"time":1364389975632,"timezoneOffset":-480,"year":113},"name":"","priority":0,"show":"offline","status":"离线","statusImageURL":"/plugins/kingrayplugin/presenceservice?actionType=getStatusImageByShow&show=offline","userName":"xiongyingqi"}]}]</div>
		<div class="loading"><div class="loading_image_div"><img src="../images/loading.gif" class="loading_image"></img></div></div>
		<!-- 分组 -->
		<div class="groupsDiv">
		</div>
		<!-- 单个分组模型 -->
		<div class="groupDiv" style="display:none;">
			<div class="extensionDiv unextension">
				<img src="../images/unextension.png" class="unextensionImg"></img>
				<span class="groupName"></span>
			</div>
			<div class="groupMembers" style="display:none;">
			</div>
		</div>
		
		<!-- 聊天窗口  style="display:none;" -->
		<div class="chatDiv">
			<form action="" method="post">
				<fieldset>
					<legend>发送消息</legend>
					<table style="width:100%;">
						<tr>
							<td style="width: 80px;" class="alignRight">
								收件人：
							</td>
							<td>
								<div contenteditable="true"  class="messageToDiv divText"></div>
							</td>
						</tr>
						<tr>
							<td style="width: 80px;" class="alignRight">
								消息内容：
							</td>
							<td>
								<textarea rows="10" cols="62" class="textArea"></textarea>
							</td>
						</tr>
					</table>
				</fieldset>
			</form>
		</div>
	</body>
</html>